<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios</title>
  </head>
  <body>
    <button class="btn1">发送 GET 请求</button>
    <button class="btn2">发送 GET 请求</button>
    <button class="btn3">发送 POST 请求</button>
    <button class="btn4">发送 PUT 请求</button>
    <button class="btn5">发送 PATCH 请求</button>
    <button class="btn6">发送 DELETE 请求</button>
    <script src="./axios.min.js"></script>
    <script src="./request.js"></script>
    <script>
      document.querySelector(".btn1").onclick = function () {
        request
          .get("/videos", {
            params: {
              title: "灌篮高手",
            },
            // 每个请求都需要携带公共参数
            // headers: {
            //   token: "xxxxxxxxxxxxxx",
            // },
          })
          .then((response) => {
            console.log(response.data);
          })
          .catch((error) => {
            console.log(error.message);
          });
      };

      document.querySelector(".btn2").onclick = async function () {
        try {
          const response = await request.get("/videos/1");
          console.log(response.data);
        } catch (error) {
          console.log(error.message);
        }
      };

      document.querySelector(".btn3").onclick = async function () {
        try {
          const response = await request.post("/videos", {
            title: "喜羊羊和灰太狼",
            summary: "羊和狼的不得不说的故事",
          });
          console.log(response.data);
        } catch (error) {
          console.log(error.message);
        }
      };

      document.querySelector(".btn4").onclick = async function () {
        try {
          // axios.put(url[, data[, config]])
          const response = await request.put("/videos/4", {
            title: "乡村爱情故事",
            summary: "赵四和刘能、谢大脚三人秘密故事",
          });
          console.log(response.data);
        } catch (error) {
          console.log(error.message);
        }
      };

      document.querySelector(".btn5").onclick = async function () {
        try {
          // axios.patch(url[, data[, config]])
          const response = await request.patch("/videos/5", {
            title: "猫和老鼠",
          });
          console.log(response.data);
        } catch (error) {
          console.log(error.message);
        }
      };

      document.querySelector(".btn6").onclick = async function () {
        try {
          // axios.delete(url[, config])
          const response = await request.delete("/videos/6");
          console.log(response.data);
        } catch (error) {
          console.log(error.message);
        }
      };
    </script>
  </body>
</html>
